<html>
    <head>
        <title>Turbulenz - Getting Started Guide - API Example</title>
        <script src="jslib/debug.js"></script>
        <script src="jslib/webgl/turbulenzengine.js"></script>
        <script src="jslib/webgl/graphicsdevice.js"></script>
        <script src="jslib/draw2d.js"></script>
    </head>
    <body>
        <canvas id="canvas" width="640px" height="480px"/>
        <script>
            TurbulenzEngine = WebGLTurbulenzEngine.create({
            canvas: document.getElementById("canvas")
            });
                        
            var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});            
            var draw2D = Draw2D.create({
            graphicsDevice: graphicsDevice
            });     
            
            var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
            var bgColor = [r, g, b, a];
            
            var x1 = 50;
            var y1 = 50;
            var x2 = graphicsDevice.width - 50;
            var y2 = graphicsDevice.height - 50;
            
            var rectangle = [x1, y1, x2, y2];
            var drawObject = {
                color: [1.0, 0.0, 0.0, 1.0],
                destinationRectangle: rectangle
            };
            
            var sprite = Draw2DSprite.create({
                width: 128,
                height: 128,
                x: graphicsDevice.width / 2,
                y: graphicsDevice.height / 1.5,
                color: [1.0, 1.0, 1.0, 1.0],
                textureRectangle: [128, 128, 256, 0]
            });
            
            var backgroundSprite = Draw2DSprite.create({
            width: 640,
            height: 640,
            x: graphicsDevice.width / 2,
            y: graphicsDevice.height / 2,
            color: [1.0, 1.0, 1.0, 1.0],
            });
            
            var texture = graphicsDevice.createTexture({
                src: "img/goldmine2.png",
                mipmaps: true,
                onload: function (texture)
                {
                    if (texture)
                    {
                        sprite.setTexture(texture);
                        sprite.setTextureRectangle([0, 0, 128, texture.height]);
                    }
                }
            });
            
            var backgroundTexture = graphicsDevice.createTexture({
                src: "img/bg3.png",
                mipmaps: true,
                onload: function (texture)
                {
                    if (texture)
                    {
                        backgroundSprite.setTexture(texture);
                        backgroundSprite.setTextureRectangle([0, 0, texture.width, texture.height]);
                    }
                }
            });
            
            var PI2 = Math.PI * 2;
            var rotateAngle = Math.PI / 64;
            
            var num = 10;
            
            var animated = true;
            
            function update() {
                b += 0.01;
                bgColor[2] = b % 1;
                
                //sprite.rotation += rotateAngle;
                //sprite.rotation %= PI2; //Wrap rotation at PI * 2
                
                sprite.setOrigin([128,0]);
                sprite.setOrigin([128,0]);
                /* Begin render */
                if (graphicsDevice.beginFrame())
                {
                    graphicsDevice.clear(bgColor, 1.0);
                    
                    if (animated)
                    {
                        sprite.setTextureRectangle([128,0,256,128]);
                        animated = false;
                    }
                    else
                    {
                        sprite.setTextureRectangle([0,0,128,128]);
                        animated = true;
                    }
                    
                    
      
                    draw2D.begin();
                    draw2D.drawSprite(backgroundSprite);
                    draw2D.end();
                    
//                    draw2D.begin();
//                    draw2D.draw(drawObject);
//                    draw2D.end();
                    
                    draw2D.begin('alpha');
                    draw2D.drawSprite(sprite);                    
                    draw2D.end();
                    
                    graphicsDevice.endFrame();                   
                }                                
            }
            
            TurbulenzEngine.setInterval(update, 1000/60);            
        </script>
    </body>
</html>